<template>
  <!-- 学习表现 -->
  <view class="studyperformance-wrap">
    <view class="studyperformance-top z-2">
      <view class="filter-section">
        <u-dropdown>
          <u-dropdown-item v-model="shopStaffId" :title="statusValueTit" :options="statuses"
            @change="handleChange"></u-dropdown-item>
        </u-dropdown>
      </view>
    </view>
    <view class="studyperformance-sales">
      <view class="studyperformance-sales-content">
        <view class="flex justify-between items-center">
          <view class="studyperformance-sales-tit">学习表现</view>
          <!-- <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"
            @click="toNextPage({ url: '/pagesshop/studyperformance/studyperformance' })"></image> -->
        </view>
        <view class="studyperformance-sales-items">
          <view class="sitem" v-for="(item, index) in studyListInfo" :key="index">
            <view class="sitem-tit">{{ item.name }}</view>
            <view class="sitem-nums">{{item.value}}</view>
          </view>
        </view>

      </view>
    </view>
    <view class="points-info">
      <view class="flex justify-between items-center f-24" style="color: rgba(0, 0, 0, 0.4); padding: 16rpx 0">
          <view class="cell1">课程名称</view>
          <view class="cell2">{{shopStaffId=='-1'?'参与比例':'参与情况'}}</view>
          <view class="cell3">{{shopStaffId=='-1'?'考试通过比例':'考试通过情况'}}</view>
      </view>
      <view v-for="(item, index) in collectionList" :key="index" class="flex justify-between items-center" style="color: rgba(0, 0, 0, 0.6); padding: 16rpx 0">
          <view class="cell1 f-24">{{item.name}}</view>
          <view class="cell2 f-28">{{shopStaffId=='-1'?item.joinPercent+'%':item.taskStatusName}}</view>
          <view class="cell3 f-28">{{ shopStaffId=='-1'?item.testPassPercent+'%':item.testStatusName }}</view>
      </view>
    </view>
    <up-divider v-if="collectionList.length>pageSize"  :text="loadStatus"></up-divider>
  </view>

</template>

<script setup>
import { IMG_URL2 } from "@/config";
import { studyApi,shopApi } from "@/api";
let currentPage = ref(1)
let pageSize = ref(15)
let totalCount = ref(0)
let loadStatus = ref('正在加载中')
const shopStaffId = ref(-1)
let statusValueTit = ref('全部员工')
let statuses = ref([])
let studyListInfo = ref([{
  name: '参与培训比例',
  value: ''
}, {
  name: '员工考试通过率',
  value: ''
}])

let collectionList = ref([])

function getShopStaffList() {
  let params = {
    currentPage: 1,
    pageSize: 9999
  }
  shopApi.SHOPGETSTAFFLIST(params).then((res) => {
    if (res.code == 200) {
      statuses.value = res.result.data.map(item=>{
        return{
          ...item,
          label:item.name,
          value:item.shopStaffId
        }
      })
      statuses.value.unshift({
        label:'全部员工',
          value:-1,
          franchiseeName: "江南第三深情",
          isEnable: true,
          isOpaAuth: false,
          mobile: "13712345678",
          name: "z",
          province: "河南省",
          role: 2,
          roleName: "审核不通过",
          shopId: 9,
          shopName: "门店1",
          shopStaffId: 14,
      })
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  });
}
const handleChange = (value) => {
  shopStaffId.value = value
  statusValueTit.value = statuses.value.find(item => item.value === value).label
  currentPage.value = 1
  if( shopStaffId.value !=-1){
    getIndexStudyData(1)
    getStudyWactchData()
  }else{
    getStaffCourseJoinList(1)
  }
  
}

const toNextPage = (item) => {
  if (item.url) {
    uni.navigateTo({
      url: item.url
    });
  }
};
const getIndexStudyData = (type)=>{
  let params={
    currentPage:currentPage.value,
    pageSize:pageSize.value,
    shopStaffId :shopStaffId.value
  }
  studyApi.STUDYGETSTAFFCOURSEJOINDETAILLIST(params).then((res) => {
      if (res.code == 200) {
        if (type == 1) {
          collectionList.value = res.result.data
          totalCount.value = res.result.totalCount
        } else {
          collectionList.value = collectionList.value.concat(res.result.data)
        }
      } else {
          uni.showToast({ title: res.errMsg, icon: "none" });
      }

  })
}
const getStudyWactchData = ()=>{
  let params={}
  if(shopStaffId.value!=-1){
    params.shopStaffId = shopStaffId.value
  }
  studyApi.STUDYGETTOTALWATCHDATA(params).then((res) => {
      if (res.code == 200) {
          studyListInfo.value[0].value = Number(res.result.hadStudyPercent)+'%';
          studyListInfo.value[1].value = Number(res.result.passPercent)+'%';
      } else {
          uni.showToast({ title: res.errMsg, icon: "none" });
      }

  })
}

const getStaffCourseJoinList = (type)=>{
  let params={
    currentPage:currentPage.value,
    pageSize:pageSize.value
  }
  studyApi.STUDYGETSTAFFCOURSEJOINLIST(params).then((res) => {
      if (res.code == 200) {
        if (type == 1) {
          collectionList.value = res.result.data
          totalCount.value = res.result.totalCount
        } else {
          collectionList.value = collectionList.value.concat(res.result.data)
        }
      } else {
          uni.showToast({ title: res.errMsg, icon: "none" });
      }

  })
}

// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  if (collectionList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  if(shopStaffId.value!=-1){
    getIndexStudyData(2)
  }else{
    getStaffCourseJoinList(2)
  }
});

// 下拉刷新
onPullDownRefresh(() => {
  uni.showToast({
    title: "下拉刷新",
    icon: "none",
    duration: 1000
  });
  collectionList.value = [];
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 2000);
});

onLoad((option) => {
  getStaffCourseJoinList(1)
  getShopStaffList()
  getStudyWactchData()
});

</script>

<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.studyperformance-wrap {
  width: 100%;

  .studyperformance-top {
    width: 100%;
    background-color: #fff;
    padding: 24rpx 0;
    box-sizing: border-box;
    margin-bottom: 12rpx;

    .studyperformance-top-left {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 30rpx;
    }

    .studyperformance-top-tit {
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: 400;
      line-height: 26px;
      text-align: left;
      color: rgba(0, 0, 0, 0.9)
    }
  }

  .studyperformance-sales {
    padding: 24rpx;
    box-sizing: border-box;

    .studyperformance-sales-content {
      background-color: #fff;
      padding: 24rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
    }

    .chevronright {
      width: 32rpx;
      height: 32rpx;
    }

    .studyperformance-sales-tit {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      text-align: left;
      color: #000000;
      margin-bottom: 12rpx;
    }

    .studyperformance-sales-items {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx;
      box-sizing: border-box;

      .sitem {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        color: #000000;

        .sitem-tit {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          text-align: center;
          color: rgba(0, 0, 0, 0.6);
          margin-bottom: 24rpx;
        }

        .sitem-nums {
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 600;
          line-height: 24px;
          text-align: center;
          color: rgba(0, 0, 0, 0.9);

        }
      }
    }
  }
  .points-info {
        width: 100%;
        border-radius: 16rpx;
        padding: 16rpx 32rpx;
        box-sizing: border-box;
        background-color: #fff;
        z-index: 1;  
        .cell1{
            width:260rpx;
            text-align: left;
        }
        .cell2{
            width:220rpx;
            text-align: center;
        }
        .cell3{
            // width:250rpx;
            width:calc( 100% - 260rpx - 220rpx);
            text-align: right;
        }
    }
}

.filter-list-box {
  width: 100%;
  padding: 28rpx 52rpx;
  box-sizing: border-box;
  .filter-item {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: normal;
    margin-bottom: 24rpx;

    &:nth-last-child(1) {
      margin-bottom: 0;
    }
  }

  .filter-item-active {
    color: var(--ui-BG-Main);
  }
}
</style>
